<template>
  <el-select class="wd400"  :disabled="disabled" :multiple="multiple" v-model="id" placeholder="请选择商业圈" filterable  :loading="loading" >
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { GetListByRegionId } from '@/api/openCity'
interface Props { //定义传参实体
    modelValue: any,
    disabled: boolean,
    multiple:boolean,
    regionId: number
}

const props =  withDefaults(defineProps<Props>(), {
    modelValue: '',
    disabled: false,
    multiple:false,
    regionId: 0
})

/**
 * 选中的商圈
 */
const id = ref<any>(props.modelValue)
/**
 * 商圈列表
 */
const list = ref<BusinessCircle[]>([])
/**
 * 定义事件
 */
interface Emits {  
  (e: 'update:modelValue', value: any): void
}
const emit = defineEmits<Emits>()
watch(()=>props.modelValue,() =>{
  id.value = props.modelValue
})
watch(()=>props.regionId,() =>{
  console.log(props.regionId)
  loadData()
})
watch(()=>id.value,() =>{
  emit('update:modelValue', id.value)
})
const loading = ref(false)
const loadData = ():void => {
  loading.value = true
  GetListByRegionId(props.regionId).then((res:ServiceResponse<BusinessCircle[]>) => {
    loading.value = false
    if(res.success)
      list.value = res.data ?? []
      if(!list.value.some(p => p.id == id.value)) {
        id.value = undefined
      }
  })
}
</script>